<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
    <title>Browser Museum</title>
    <style type="text/css">
      /* 轮播图 */
      .carousel {
        height: 500px;
        margin-bottom: 60px;
      }
      .carousel .item {
        height: 500px;
        background-color: #000;
      }
      .carousel .item img {
        width: 100%;
      }
      .carousel-caption {
        z-index: 10;
      }
      .carousel-caption p {
        font-size: 20px;
        line-height: 2;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button
            class="navbar-toggle"
            data-toggle="collapse"
            data-target="#example-navbar-collapse"
          >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">现代浏览器博物馆</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                综述
              </a>
            </li>
            <li class="dropdown">
              <a href="#row.row" class="dropdown-toggle" data-toggle="dropdown">
                简述
              </a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                特点
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#Chrome">Chrome</a>
                </li>
                <li>
                  <a href="#Firefox">Firefox</a>
                </li>
                <li>
                  <a href="#Safari">Safari</a>
                </li>
                <li>
                  <a href="#Opera">Opera</a>
                </li>
                <li><a href="#IE">IE</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" data-toggle="modal" data-target="#myModal"> 关于 </a>
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input
                class="form-control"
                type="text"
                placeholder="请输入搜索内容"
              />
            </div>
            <button class="btn btn-info">搜索</button>
          </form>
        </div>
      </div>
    </nav>

    <!--轮播图-->
    <div
      class="carousel slide"
      data-ride="carousel"
      data-interval="2000"
      id="b"
    >
      <!--小圆点-->
      <ol class="carousel-indicators">
        <li data-target="#b" data-silde-to="0" class="active"></li>
        <li data-target="#b" data-silde-to="1"></li>
        <li data-target="#b" data-silde-to="2"></li>
        <li data-target="#b" data-silde-to="3"></li>
        <li data-target="#b" data-silde-to="4"></li>
      </ol>
      <!--轮播项-->
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/1.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>Chrome</h1>
              <p>
                Google
                Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
              </p>
              <p>
                <a
                  class="btn btn-lg btn-primary"
                  href="http://www.google.cn"
                  role="button"
                  target="_blank"
                  >点我下载</a
                >
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/2.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>Firefox</h1>
              <p>
                Mozilla
                Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
              </p>
              <p>
                <a
                  class="btn btn-lg btn-primary"
                  href="http://www.firefox.com.cn/download/"
                  target="_blank"
                  role="button"
                  >点我下载</a
                >
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/3.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>Safari</h1>
              <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
              <p>
                <a
                  class="btn btn-lg btn-primary"
                  href="http://www.apple.com/cn/safari/"
                  target="_blank"
                  role="button"
                  >点我下载</a
                >
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/4.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>Opera</h1>
              <p>
                Opera浏览器，是一款挪威Opera Software
                ASA公司制作的支持多页面标签式浏览的网络浏览器。
              </p>
              <p>
                <a
                  class="btn btn-lg btn-primary"
                  href="http://www.opera.com/zh-cn"
                  target="_blank"
                  role="button"
                  >点我下载</a
                >
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/5.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>IE</h1>
              <p>
                Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。
              </p>
              <p>
                <a
                  class="btn btn-lg btn-primary"
                  href="http://ie.microsoft.com/"
                  target="_blank"
                  role="button"
                  >点我下载</a
                >
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--左右箭头-->
      <a
        href="#b"
        class="left carousel-control"
        role="button"
        data-slide="prev"
      >
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a
        href="#b"
        class="right carousel-control"
        role="button"
        data-slide="next"
      >
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

    <!--模态框-->
    <div class="container">
      <div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button class="btn close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">关于</h4>
            </div>
            <div class="modal-body">
              <p>
                慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。
              </p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-default" data-dismiss="modal">
                了解了
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--简介-->
    <div class="container text-center">
      <div id="row" class="row" style="margin: 50px auto">
        <div class="col-sm-4">
          <img src="img/6.jpg" />
          <h2>Chrome</h2>
          <p>
            Google
            Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
          </p>
          <button class="btn btn-default">点我下载</button>
        </div>
        <div class="col-sm-4">
          <img src="img/7.jpg" />
          <h2>Firefox</h2>
          <p>
            Mozilla
            Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
          </p>
          <button class="btn btn-default">点我下载</button>
        </div>
        <div class="col-sm-4">
          <img src="img/8.jpg" />
          <h2>Safari</h2>
          <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
          <button class="btn btn-default">点我下载</button>
        </div>
      </div>
    </div>

    <hr />

    <!--特点-->
    <div class="container">
      <!--导航-->
      <ul class="nav nav-tabs" role="tablist">
        <li class="active" id="Chrome">
          <a href="#chrome1" role="tab" data-toggle="tab">Chrome</a>
        </li>
        <li id="Firefox">
          <a href="#firefox1" role="tab" data-toggle="tab">Firefox</a>
        </li>
        <li id="Safari">
          <a href="#safari1" role="tab" data-toggle="tab">Safari</a>
        </li>
        <li id="Opera">
          <a href="#opera1" role="tab" data-toggle="tab">Opera</a>
        </li>
        <li id="IE"><a href="#ie1" role="tab" data-toggle="tab">IE</a></li>
      </ul>
      <!--内容-->
      <div class="tab-content">
        <div class="tab-pane fade in active" id="chrome1">
          <div class="container-fluid">
            <div class="col-sm-7">
              <h2 class="header">
                Google Chrome <span>使用最广的浏览器</span>
              </h2>
              <p class="p">
                Google
                Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
              </p>
            </div>
            <div class="col-sm-5">
              <img src="img/9.jpg" class="tupian" />
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="firefox1">
          <div class="container-fluid">
            <div class="col-sm-5">
              <img src="img/10.jpg" class="tupian" />
            </div>
            <div class="col-sm-7">
              <h2 class="header">Mozilla Firefox <span>美丽的狐狸</span></h2>
              <p class="p">
                Mozilla
                Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
                使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。
              </p>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="safari1">
          <div class="container-fluid">
            <div class="col-sm-7">
              <h2 class="header">Safari <span>Mac用户首选</span></h2>
              <p class="p">
                Safari，是苹果计算机的最新操作系统Mac OS
                X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
                Safari在2003年1月7日首度发行测试版，并成为Mac OS X
                v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod
                touch的指定浏览器。
              </p>
            </div>
            <div class="col-sm-5">
              <img src="img/11.jpg" class="tupian" />
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="opera1">
          <div class="container-fluid">
            <div class="col-sm-5">
              <img src="img/12.jpg" class="tupian" />
            </div>
            <div class="col-sm-7">
              <h2 class="header">Opera <span>小众但易用</span></h2>
              <p class="p">
                Opera浏览器，是一款挪威Opera Software
                ASA公司制作的支持多页面标签式浏览的网络浏览器。
                是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
              </p>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="ie1">
          <div class="container-fluid">
            <div class="col-sm-7">
              <h2 class="header">IE <span>你懂的</span></h2>
              <p class="p">
                Internet Explorer，原称Microsoft Internet
                Explorer(6版本以前)和Windows Internet
                Explorer(7，8，9，10版本)，
                简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
              </p>
            </div>
            <div class="col-sm-5">
              <img src="img/13.jpg" class="tupian" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--底部-->
    <div class="container" style="margin: 50px auto">
      <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>©copy 2021-10-22 雷格伟</p>
      </footer>
    </div>
  </body>
</html>
